<script setup>
import { onMounted, reactive, ref, toRefs, defineExpose,watchEffect } from 'vue'
import {
  getCompanyList,
  getMaterialList,
  getStockList,
  getJobNumberList,
  getLabourList,
  getDeductRatio
} from '../service/processcontrol'
const props = defineProps({
  formValue: {
    type: Object
  },
  isEdit: {
    type: Boolean,
    default: false
  },
  carData: {
    type: Object
  },
  weightData: {
    type: Object
  },
  carModelData: {
    type: Object
  },
  carWeigh: {
    type: String
  }
})
const deductValue = ref('1')
const { formValue, isEdit, carData, weightData, carModelData, carWeigh } = toRefs(props)
const initFormInline = ref(carModelData)
const formInline = ref(carModelData)
const ruleForm = ref()
let deptObj = window._info || {} //另一个项目传过来的数据
const info = window._deptObj || {}
defineExpose({
  ruleForm,
  initFormInline,
  formInline,
  deductValue
})
onMounted(() => {
  getProviderName()
  getReceiverName()
  getJobDataList()
  getLabourDataList()
})
watchEffect(() =>{
  if (carModelData.value && carModelData.value.MaterialType) {
    getMaterialName(carModelData.value.MaterialType)
  }
})
//获取供应单位
const providerName = ref([])
const getProviderName = () => {
  let params = {
    TenantID: info.TenantID, //租户编号
    OrgId: info.OrgId, //机构编号
    DeptCode: info.DeptCode, //项目编号
    GuestType: 1,
    Where: '',
    Types: 0
  }
  getCompanyList(params).then((res) => {
    if (res.ResultCode === 105) {
      providerName.value = res.Info || []
    }
  })
}
const createCompanyItem = (e) => {
  formInline.value.MaterialCode= ''
  formInline.value.MaterialName = ''
  if(formInline.value.YieldCategory === '1'){
    formInline.value.StockCode = ''
    formInline.value.StockName = ''
  }
  let filterData = providerName.value.filter((item) => item.OrgCode === e)
  if (filterData.length > 0) {
    formInline.value.ProviderName = filterData[0].GuestName
    formInline.value.ProviderCode = e
    getMaterialName(filterData[0].Type)
    // getsiloDataList(filterData[0].Type)
  }
}
// 根据供应单位和材料信息获取扣率信息
const gettMaterialDeductRatio = (GuestCode,MaterialCode) => {
  let params = {
    TenantID: info.TenantID, //租户编号
    OrgId: info.OrgId, //机构编号
    DeptCode: info.DeptCode, //项目编号
    MaterialCode,
    GuestCode
  }
  let newDeductRatio = null
  getDeductRatio(params).then((res) => {
    if (res.ResultCode === 105 && res.Info && res.Info.length > 0) {
      newDeductRatio = res.Info[0] || null
    }
  })
  return newDeductRatio
}
//用料单位
const receiverName = ref([])
const getReceiverName = () => {
  let params = {
    TenantID: info.TenantID, //租户编号
    OrgId: info.OrgId, //机构编号
    DeptCode: info.DeptCode, //项目编号
    GuestType: 2,
    Where: '',
    Types: 0
  }
  getCompanyList(params).then((res) => {
    if (res.ResultCode === 105) {
      receiverName.value = res.Info || []
    }
  })
}
// 直发直收过磅时的用料单位
const createItem = (e) => {
  formInline.value.MaterialName = ''
  formInline.value.MaterialCode = ''
  let filterData = receiverName.value.filter((item) => item.OrgCode === e)
  if (filterData.length > 0) {
    formInline.value.ReceiverName = filterData[0].GuestName
    formInline.value.ReceiverCode = e
    getMaterialName(filterData[0].Type)
  }
}

// 发料过磅时的用料单位
const createTwoItem = (e) => {
  formInline.value.MaterialCode = ''
  formInline.value.MaterialName = ''
  let filterData = receiverName.value.filter((item) => item.OrgCode === e)
  if (filterData.length > 0) {
    formInline.value.ProviderName = filterData[0].GuestName
    formInline.value.ProviderCode = e
    getMaterialName(filterData[0].Type)
  }
}
// 料仓
const stockData = ref([])
const getsiloDataList = (type) => {
  let params = {
    TenantID: info.TenantID, //租户编号
    OrgId: info.OrgId, //机构编号
    DeptCode: info.DeptCode, //项目编号
    StockType: type,
    Where: '',
    Types: 0
  }
  getStockList(params).then((res) => {
    if (res.ResultCode === 105) {
      stockData.value = res.Info || []
    }
  })
}
const createStockItem = (e) => {
  let filterData = stockData.value.filter((item) => item.StockCode === e)
  if (filterData.length > 0) {
    formInline.value.StockCode = filterData[0].StockCode
    formInline.value.StockName = filterData[0].StockName
  }
}
// 选择料仓前先检查材料大类有没有选择
const stockSelect = (e) => {
  if (e && formInline.value.MaterialCode === '') {
    return ElMessage.warning('请先选择材料大类!')
  }
}
// 使用工号
const jobNumberdata = ref([])
const getJobDataList = () => {
  let params = {
    TenantID: info.TenantID, //租户编号
    OrgId: info.OrgId, //机构编号
    DeptCode: info.DeptCode, //项目编号
    Where: '',
    Types: 0
  }
  getJobNumberList(params).then((res) => {
    if (res.ResultCode === 105) {
      jobNumberdata.value = res.Info || []
    }
  })
}
const createJobItem = (e) => {
  let filterData = jobNumberdata.value.filter((item) => item.WBSCode === e)
  if (filterData.length > 0) {
    formInline.value.StockCode = e
    formInline.value.StockName = filterData[0].WBSName
  }
}

// 劳务队伍
const labourData = ref([])
const getLabourDataList = () => {
  let params = {
    TenantID: info.TenantID, //租户编号
    OrgId: info.OrgId, //机构编号
    DeptCode: info.DeptCode, //项目编号
    Where: '',
    Types: 0
  }
  getLabourList(params).then((res) => {
    if (res.ResultCode === 105) {
      labourData.value = res.Info || []
    }
  })
}

const createLaborItem = (e) => {
  let filterData = labourData.value.filter((item) => item.LaborCode === e)
  if (filterData.length > 0) {
    formInline.value.LaborCode = e
    formInline.value.LaborName = filterData[0].LaborName
  }
}
//材料信息
const materialName = ref([])
const getMaterialName = (type) => {
  let params = {
    TenantID: info.TenantID, //租户编号
    OrgId: info.OrgId, //机构编号
    DeptCode: info.DeptCode, //项目编号
    MaterialType: type,
    Where: '',
    Types: 0
  }
  getMaterialList(params).then((res) => {
    if (res.ResultCode === 105) {
      materialName.value = res.Info || []
      if(res.Info.length > 0){
        getsiloDataList(res.Info[0].MaterialType)
      }
    }
  })
}
const createMaterialItem = (e) => {
  if (formInline.value.YieldCategory === '1') {
    formInline.value.StockCode = ''
    formInline.value.StockName = ''
  }
  if (formInline.value.YieldCategory === '1' || formInline.value.YieldCategory === '3') {
      formInline.value.DeductWeight = 0
  }
  let filterData = materialName.value.filter((item) => item.MaterialCode === e)
  if (filterData.length > 0) {
    if (formInline.value.YieldCategory === '1' || formInline.value.YieldCategory === '3') {
      const newDeductRatio = gettMaterialDeductRatio(formInline.value.ProviderCode,e)
      formInline.value.DeductRatio = newDeductRatio?newDeductRatio:filterData[0].DeductRatio
      formInline.value.CheckWeight = filterData[0].InCheckWeight
    } else {
      formInline.value.DeductRatio = filterData[0].DeductRatio
      formInline.value.CheckWeight = filterData[0].OutCheckWeight
    }

    formInline.value.MaterialCode = e
    formInline.value.MaterialName = filterData[0].MaterialName
    formInline.value.MaterialType = filterData[0].MaterialType
    formInline.value.MaterialModel = filterData[0].MaterialModel
    formInline.value.HiddenDeductWeight=filterData[0].HiddenDeductWeight
    formInline.value.ContracDeductRatio=0
    formInline.value.ContracDeductWeight=0
    getsiloDataList(filterData[0].MaterialType)
  }
}
//扣率、扣吨切换
const deductValueChange = (e) => {
  deductValue.value = e
}
// 表单验证
const rules = reactive({
  BatchNo: [
    {
      // 自定义校验规则
      pattern:  /^[a-zA-Z0-9]+$/,
      message: '只能输入英文和数字',
      trigger: 'blur'
    }
  ],
  ProvideWeight: [
    {
      validator(rule, value, callback) {
        if (parseInt(value) == parseFloat(value)) {
          // 校验不通过
          if (value.length > 5) {
            return callback(new Error('最多输入5位正整数'))
          } else {
            callback()
          }
        } else if (parseInt(value) < parseFloat(value)) {
          let num = value.toString().split(".")[1].length || 0
          if (num > 3) {
            return callback(new Error('最多输入3位小数'))
          } else {
            callback()
          }
        } else {
          // 校验通过
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  CapacityRatio: [
    {
      validator(rule, value, callback) {
        let rule1 = /^[0-9]\d*$/ //正整数
        let rule2 = /^[\-\+]?(((([1-9]\d*)|0)\.\d*)|((([1-9]\d*)|0)?\.\d+)|([1-9]\d*\/[1-9]\d*))$/ //小数和分数
        if (value && value !== '' && !rule1.test(value) && !rule2.test(value)) {
          // 校验不通过
          return callback(new Error('只能输入小数或正整数与/'))
        } else {
          // 校验通过
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  DeductWeight: [
    {
      validator(rule, value, callback) {
        if (parseInt(value) == parseFloat(value)) {
          // 校验不通过
          if (value.length > 5) {
            return callback(new Error('最多输入5位正整数'))
          } else {
            callback()
          }
        } else if (parseInt(value) < parseFloat(value)) {
          let num = value.toString().split(".")[1].length || 0
          if (num > 3) {
            return callback(new Error('最多输入3位小数'))
          } else {
            callback()
          }
        } else {
          // 校验通过
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  DeductRatio: [
    {
      validator(rule, value, callback) {
        if (parseInt(value) == parseFloat(value)) {
          // 校验不通过
          if (value.length > 5) {
            return callback(new Error('最多输入5位正整数'))
          } else {
            callback()
          }
        } else if (parseInt(value) < parseFloat(value)) {
          let num = value.toString().split(".")[1].length || 0
          if (num > 3) {
            return callback(new Error('最多输入3位小数'))
          } else {
            callback()
          }
        } else {
          // 校验通过
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
})
// 控制运单量、扣吨、扣率不能输入负数
const changeProvideWeight = (e) =>{
  formInline.value.ProvideWeight = Math.max(0,e)
}
const changeDeductWeight = (e) =>{
  formInline.value.DeductWeight = Math.max(0,e)
}
const changeDeductRatio = (e) =>{
  formInline.value.DeductRatio = Math.max(0,e)
}
// 生产厂商不能输入标点符号
const factoryChange = (e) => {
  formInline.value.Factory = formInline.value.Factory.replace(/[^\w\s]/g, '')
}
</script>
<template>
  <div class="car-data">
    <div class="top-data">
      <div class="tonnage">
        <span class="label" v-if="props.carWeigh === '1'">稳定<br />传输</span>
        <span class="data">{{ weightData.Weight }}</span>
        <span class="unit">吨</span>
      </div>
      <div class="license-plate">
        <span class="label">未知<br />号牌</span>
        <span class="data">{{ carData.VIN }}</span>
      </div>
    </div>
    <div class="form-data">
      <div class="title">
        <img src="../images/databoxicon.png" />
        <span class="title-name">过磅数据</span>
      </div>
      <div class="data-box">
        <div class="form-box">
          <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
            :rules="rules"
            ref="ruleForm"
          >
            <el-row :gutter="24">
              <el-col
                :span="12"
                v-if="formInline.YieldCategory === '1' || formInline.YieldCategory === '3'"
              >
                <el-form-item label="供应单位">
                  <el-select
                    v-model="formInline.ProviderCode"
                    placeholder="请选择供应单位"
                    filterable
                    popper-class="multiClass"
                    :teleported="false"
                    @change="createCompanyItem"
                    :disabled="!props.isEdit"
                  >
                    <el-option
                      v-for="(item, index) in providerName"
                      :key="index"
                      :label="item.GuestName"
                      :value="item.OrgCode"
                    >
                      <span class="select-name">{{ item.GuestName }}</span>
                      <span class="select-code">{{ item.OrgCode }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="formInline.YieldCategory === '2'">
                <el-form-item label="用料单位">
                  <el-select
                    v-model="formInline.ProviderCode"
                    placeholder="请选择用料单位"
                    filterable
                    :teleported="false"
                    popper-class="multiClass"
                    @change="createTwoItem"
                    :disabled="!props.isEdit"
                  >
                    <el-option
                      v-for="(item, index) in receiverName"
                      :key="index"
                      :label="item.GuestName"
                      :value="item.OrgCode"
                    >
                      <span class="select-name">{{ item.GuestName }}</span>
                      <span class="select-code">{{ item.OrgCode }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="formInline.YieldCategory === '3'">
                <el-form-item label="用料单位">
                  <el-select
                    v-model="formInline.ReceiverCode"
                    placeholder="请选择用料单位"
                    filterable
                    :teleported="false"
                    popper-class="multiClass"
                    @change="createItem"
                    :disabled="!props.isEdit"
                  >
                    <el-option
                      v-for="(item, index) in receiverName"
                      :key="index"
                      :label="item.GuestName"
                      :value="item.OrgCode"
                    >
                      <span class="select-name">{{ item.GuestName }}</span>
                      <span class="select-code">{{ item.OrgCode }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col
                :span="12"
                v-if="formInline.YieldCategory === '2' || formInline.YieldCategory === '3'"
              >
                <el-form-item label="使用工号">
                  <el-select
                    v-model="formInline.StockCode"
                    placeholder="请选择使用工号"
                    filterable
                    :teleported="false"
                    @change="createJobItem"
                    :disabled="!props.isEdit"
                  >
                    <el-option
                      v-for="(item, index) in jobNumberdata"
                      :key="index"
                      :label="item.WBSName"
                      :value="item.WBSCode"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="formInline.YieldCategory === '3'">
                <el-form-item label="劳务队伍">
                  <el-select
                    v-model="formInline.LaborCode"
                    placeholder="请选择劳务队伍"
                    filterable
                    popper-class="multiClass"
                    :teleported="false"
                    @change="createLaborItem"
                    :disabled="!props.isEdit"
                  >
                    <el-option
                      v-for="(item, index) in labourData"
                      :key="index"
                      :label="item.LaborName"
                      :value="item.LaborCode"
                    >
                      <span class="select-name">{{ item.LaborName }}</span>
                      <span class="select-code">{{ item.LaborCode }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col
                :span="formInline.YieldCategory === '1' ? 12 : 24"
                v-if="formInline.YieldCategory"
              >
                <el-form-item label="材料信息">
                  <el-select
                    v-model="formInline.MaterialCode"
                    placeholder="请选择材料信息"
                    filterable
                    :teleported="false"
                    popper-class="multiClass"
                    @change="createMaterialItem"
                    :disabled="!props.isEdit"
                  >
                    <el-option
                      v-for="(item, index) in materialName"
                      :key="index"
                      :label="`${item.MaterialName}-${item.MaterialModel}-${item.PrimaryUnit}`"
                      :value="item.MaterialCode"
                    >
                      <span class="select-name"
                        >{{ item.MaterialName }}{{ item.MaterialModel }}</span
                      >
                      <span class="select-code">{{ item.PrimaryUnit }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24" v-if="formInline.YieldCategory === '1'">
                <el-form-item label="料&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;仓">
                  <el-select
                    v-model="formInline.StockCode"
                    placeholder="请选择料仓"
                    filterable
                    :teleported="false"
                    popper-class="multiClass"
                    @change="createStockItem"
                    @visible-change="stockSelect"
                    :disabled="!props.isEdit"
                  >
                    <el-option
                      v-for="(item, index) in stockData"
                      :key="index"
                      :label="item.StockName"
                      :value="item.StockCode"
                    >
                      <span class="select-name">{{ item.StockName }}</span>
                      <span class="select-code">{{ item.StockCode }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" v-if="formInline.YieldCategory === '2'">
                <el-form-item label="本车方量">
                  <el-input v-model="formInline.ProvideWeight" :disabled="!props.isEdit">
                    <template #suffix>
                      <span class="unit">{{ formInline.PrimaryUnit }}</span>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col
                :span="9"
                v-if="formInline.YieldCategory === '1' || formInline.YieldCategory === '3'"
              >
                <el-form-item label="运单量" prop="ProvideWeight">
                  <el-input
                    v-model="formInline.ProvideWeight"
                    :disabled="!props.isEdit"
                    type="number"
                    :min="0"
                    @input="changeProvideWeight"
                  >
                    <template #suffix>
                      <span class="unit">{{ formInline.PrimaryUnit }}</span>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item
                  :label="'转换系数&nbsp;&nbsp;1' + formInline.PrimaryUnit + '='"
                  v-if="formInline.PrimaryUnit"
                  prop="CapacityRatio"
                >
                  <el-input
                    v-model="formInline.CapacityRatio"
                    style="width: 100%"
                    :disabled="!props.isEdit"
                    maxlength="10"
                  >
                    <template #suffix>
                      <span class="unit">{{ formInline.AuxiliaryUnit }}</span>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="转换系数" v-else prop="CapacityRatio">
                  <el-input
                    v-model="formInline.CapacityRatio"
                    style="width: 100%"
                    :disabled="!props.isEdit"
                    maxlength="10"
                  >
                    <template #suffix>
                      <span class="unit">{{ formInline.AuxiliaryUnit }}</span>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item
                  label="扣重"
                  :prop="
                    deductValue === '1' ? 'DeductWeight' : deductValue === '2' ? 'DeductRatio' : ''
                  "
                >
                  <el-select
                    style="width: 51%; margin-right: 2%"
                    v-model="deductValue"
                    class="decut-select"
                    @change="deductValueChange"
                    :disabled="!props.isEdit"
                  >
                    <el-option value="1" label="扣吨" />
                    <el-option value="2" label="扣率(%)" />
                  </el-select>
                  <el-input
                    v-model="formInline.DeductWeight"
                    style="width: 47%"
                    v-if="deductValue === '1'"
                    :disabled="!props.isEdit"
                    type="number"
                    :min="0"
                    @input="changeDeductWeight"
                  ></el-input>
                  <el-input
                    v-model="formInline.DeductRatio"
                    style="width: 47%"
                    v-if="deductValue === '2'"
                    type="number"
                    :min="0"
                    :disabled="!props.isEdit"
                    @input="changeDeductRatio"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="formInline.YieldCategory?9:12">
                <el-form-item label="生产厂商">
                  <el-input v-model="formInline.Factory" :disabled="!props.isEdit" maxlength="30" @input='factoryChange'/>
                </el-form-item>
              </el-col>
              <el-col :span="formInline.YieldCategory?9:12">
                <el-form-item label="炉批号" prop="BatchNo">
                  <el-input v-model="formInline.BatchNo" :disabled="!props.isEdit" maxlength="16" />
                </el-form-item>
              </el-col>
              <el-col :span="formInline.YieldCategory?6:8">
                <el-form-item label="毛重" class="noEditContent">
                  <span class="value_data" :title="formInline.PayGrossWeight">{{
                    formInline.PayGrossWeight
                  }}</span>
                  <span class="unit">{{ formInline.AuxiliaryUnit }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="formInline.YieldCategory?6:8">
                <el-form-item label="皮重" class="noEditContent">
                  <span class="value_data" :title="formInline.TareWeight">{{
                    formInline.TareWeight
                  }}</span>
                  <span class="unit">{{ formInline.AuxiliaryUnit }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="formInline.YieldCategory?6:8">
                <el-form-item label="净重" class="noEditContent">
                  <span class="value_data" :title="formInline.PayNetWeight">{{
                    formInline.PayNetWeight
                  }}</span>
                  <span class="unit">{{ formInline.AuxiliaryUnit }}</span>
                </el-form-item>
              </el-col>
              <el-col  :span="formInline.YieldCategory?6:8">
                <el-form-item label="实际量" class="noEditContent">
                  <span class="value_data" :title="formInline.PUCount">{{
                    formInline.PUCount
                  }}</span>
                  <span class="unit">{{ formInline.PrimaryUnit }}</span>
                </el-form-item>
              </el-col>
              <el-col  :span="formInline.YieldCategory?6:8">
                <el-form-item
                  :label="formInline.YieldCategory === '1' ? '收料量' : '发料量'"
                  class="special-item"
                >
                  <span class="value_data" :title="formInline.AUCount">{{
                    formInline.AUCount
                  }}</span>
                  <span class="unit">{{ formInline.PrimaryUnit }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.car-data {
  width: 780px;
  height: 100%;
  margin-right: 10px;
  margin-bottom: 10px;
  .top-data {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .tonnage,
    .license-plate {
      height: 75px;
      background-color: #2c324d;
      padding: 0 15px;
      display: flex;
      align-items: center;
    }
    .tonnage {
      width: 400px;
      margin-right: 10px;
      justify-content: space-between;
      .label {
        font-size: 16px;
        font-weight: bold;
        color: #fff;
      }
      .data {
        font-size: 48px;
        font-weight: bold;
        color: #00ffe9;
      }
      .unit {
        font-size: 32px;
        font-weight: bold;
        color: #989eba;
      }
    }
    .license-plate {
      width: 370px;
      .label {
        font-size: 16px;
        font-weight: bold;
        color: #165dff;
      }
      .data {
        font-size: 48px;
        font-weight: bold;
        color: #00ffe9;
        flex-grow: 1;
        text-align: center;
      }
    }
  }
  .form-data {
    width: 100%;
    height: calc(100% - 95px);
    overflow: hidden;
    .title {
      width: 100%;
      height: 50px;
      background-color: #2c324d;
      margin-bottom: 1px;
      display: flex;
      align-items: center;
      padding: 0 15px;
      img {
        width: 24px;
        height: 24px;
        margin-right: 5px;
        margin-top: 5px;
      }
      .title-name {
        font-size: 24px;
        font-weight: bold;
        color: #989eba;
      }
    }
    .data-box {
      width: 100%;
      height: calc(100% - 41px);
      padding: 20px 15px 0;
      overflow-y: auto;
      background-color: #2c324d;
      :deep(.el-form) {
        .el-form-item {
          width: 100%;
          margin-bottom: 24px;
        }
        .noEditContent .el-form-item__content {
          justify-content: space-between;
          .value_data {
            color: #fff;
            font-weight: bold;
            display: inline-block;
            max-width: 60%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .multiClass .el-select-dropdown__item {
          height: 50px !important;
          line-height: 35px !important;
        }
        .el-select {
          width: 100%;
          appearance: none;
          -moz-appearance: none; /* Firefox */
          -webkit-appearance: none; /* Safari 和 Chrome */
          .el-popper {
            background-color: #2c324d;
            border: none;
            color: #86909c;
            inset: 35px auto auto 0px !important;
            .el-popper__arrow {
              display: none;
            }
            .el-scrollbar__view {
              padding-top: 0;
            }
          }
          .select-name {
            font-size: 14px;
            font-weight: bold;
            display: block;
          }
          .select-code {
            font-size: 12px;
            display: block;
            line-height: 0 !important;
          }
          .el-select-dropdown__item.hover,
          .el-select-dropdown__item:hover {
            background-color: transparent;
          }
          .el-select-dropdown__item {
            background: #1b2133;
          }
          .el-select-dropdown__item:not(:last-child) {
            border-bottom: 1px solid #86909c;
          }
          .el-select-dropdown__item.selected {
            color: #165dff;
            background: #6a7ba6;
          }
        }
        .decut-select {
          .el-input__inner {
            color: #626887 !important;
          }
        }

        .special-item {
          .value_data,
          .unit,
          .el-form-item__label {
            color: #165dff;
          }
          .el-form-item__content {
            justify-content: space-between;
            .value_data {
              font-weight: bold;
              display: inline-block;
              max-width: 60%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
        .el-form-item__label {
          font-size: 16px;
          color: #626887;
          font-weight: bold;
        }
        .el-input__wrapper {
          background-color: #3f4563;
          box-shadow: none;
          border-radius: 0px;
        }
        .el-input__inner {
          color: #fff;
          font-size: 15px;
        }
      }
      .unit {
        font-size: 14px;
        color: #626887;
      }
    }
  }
}
</style>
